<template>
  <div class="order-detail-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/user/profile' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/order/list' }">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">订单详情</h1>
    </div>
    
    <!-- 订单状态卡片 -->
    <div v-if="!loading && order" class="order-status-card">
      <div class="status-info">
        <div class="order-number">订单号：{{ order.id }}</div>
        <div class="create-time">创建时间：{{ order.createTime }}</div>
        <div class="status-badge">
          <el-tag :type="getStatusType(order.status)">{{ order.statusText }}</el-tag>
        </div>
      </div>
      <!-- 订单状态进度 -->
      <div v-if="order.status !== 'cancelled' && order.status !== 'pending_payment'" class="status-progress">
        <div class="progress-steps">
          <div class="progress-step" :class="{ active: isStepActive('pending_payment') }"></div>
          <div class="progress-line" :class="{ active: isStepActive('pending_shipment') }"></div>
          <div class="progress-step" :class="{ active: isStepActive('pending_shipment') }"></div>
          <div class="progress-line" :class="{ active: isStepActive('pending_receipt') }"></div>
          <div class="progress-step" :class="{ active: isStepActive('pending_receipt') }"></div>
          <div class="progress-line" :class="{ active: isStepActive('completed') }"></div>
          <div class="progress-step" :class="{ active: isStepActive('completed') }"></div>
        </div>
        <div class="progress-labels">
          <div class="progress-label">已下单</div>
          <div class="progress-label">已付款</div>
          <div class="progress-label">已发货</div>
          <div class="progress-label">已完成</div>
        </div>
      </div>
    </div>
    
    <!-- 订单详情内容 -->
    <div v-if="!loading" class="order-detail-content">
      <!-- 加载失败或订单不存在 -->
      <div v-if="!order" class="order-not-found">
        <div class="not-found-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="not-found-text">订单不存在或已被删除</div>
        <el-button type="primary" @click="goBack" class="go-back-btn">
          返回订单列表
        </el-button>
      </div>
      
      <!-- 订单详情 -->
      <div v-else class="order-detail">
        <!-- 收货信息 -->
        <div class="detail-section">
          <div class="section-title">收货信息</div>
          <div class="section-content">
            <div class="address-info">
              <div class="recipient-info">
                <span class="recipient-name">{{ order.address.name }}</span>
                <span class="recipient-phone">{{ order.address.phone }}</span>
              </div>
              <div class="address-detail">
                {{ order.address.province }}{{ order.address.city }}{{ order.address.district }}{{ order.address.detailAddress }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 商品列表 -->
        <div class="detail-section">
          <div class="section-title">商品信息</div>
          <div class="section-content">
            <div class="product-list">
              <div v-for="item in order.items" :key="item.id" class="product-item">
                <div class="product-image">
                  <img :src="item.image" :alt="item.name" />
                </div>
                <div class="product-info">
                  <div class="product-name">{{ item.name }}</div>
                  <div class="product-specs">
                    <span v-for="(value, key) in item.specs" :key="key" class="spec-item">
                      {{ key }}：{{ value }}
                    </span>
                  </div>
                  <div class="product-price">
                    <span class="price">¥{{ item.price }}</span>
                    <span class="quantity">x{{ item.quantity }}</span>
                  </div>
                </div>
                <div class="product-total">
                  ¥{{ (item.price * item.quantity).toFixed(2) }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 支付信息 -->
        <div class="detail-section">
          <div class="section-title">支付信息</div>
          <div class="section-content">
            <div class="payment-info">
              <div class="payment-item">
                <span class="item-label">支付方式：</span>
                <span class="item-value">{{ getPaymentMethodText(order.paymentMethod) }}</span>
              </div>
              <div v-if="order.paymentTime" class="payment-item">
                <span class="item-label">支付时间：</span>
                <span class="item-value">{{ order.paymentTime }}</span>
              </div>
              <div v-if="order.paymentNumber" class="payment-item">
                <span class="item-label">交易流水号：</span>
                <span class="item-value">{{ order.paymentNumber }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 物流信息 -->
        <div v-if="order.shippingTime" class="detail-section">
          <div class="section-title">物流信息</div>
          <div class="section-content">
            <div class="shipping-info">
              <div v-if="order.logisticsCompany" class="shipping-item">
                <span class="item-label">物流公司：</span>
                <span class="item-value">{{ order.logisticsCompany }}</span>
              </div>
              <div v-if="order.trackingNumber" class="shipping-item">
                <span class="item-label">物流单号：</span>
                <span class="item-value">{{ order.trackingNumber }}</span>
              </div>
              <div v-if="order.shippingTime" class="shipping-item">
                <span class="item-label">发货时间：</span>
                <span class="item-value">{{ order.shippingTime }}</span>
              </div>
              <div v-if="order.deliveryTime" class="shipping-item">
                <span class="item-label">收货时间：</span>
                <span class="item-value">{{ order.deliveryTime }}</span>
              </div>
              <div v-if="order.logisticsInfo && order.logisticsInfo.length > 0" class="logistics-details">
                <div class="logistics-title">物流详情：</div>
                <div class="logistics-steps">
                  <div v-for="(step, index) in order.logisticsInfo" :key="index" class="logistics-step">
                    <div class="step-icon" :class="{ first: index === 0, last: index === order.logisticsInfo.length - 1 }"></div>
                    <div class="step-content">
                      <div class="step-text">{{ step.text }}</div>
                      <div class="step-time">{{ step.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单信息 -->
        <div class="detail-section">
          <div class="section-title">订单信息</div>
          <div class="section-content">
            <div class="order-info">
              <div class="info-grid">
                <div class="info-item">
                  <span class="item-label">订单编号：</span>
                  <span class="item-value">{{ order.id }}</span>
                </div>
                <div class="info-item">
                  <span class="item-label">创建时间：</span>
                  <span class="item-value">{{ order.createTime }}</span>
                </div>
                <div v-if="order.paymentTime" class="info-item">
                  <span class="item-label">支付时间：</span>
                  <span class="item-value">{{ order.paymentTime }}</span>
                </div>
                <div v-if="order.shippingTime" class="info-item">
                  <span class="item-label">发货时间：</span>
                  <span class="item-value">{{ order.shippingTime }}</span>
                </div>
                <div v-if="order.deliveryTime" class="info-item">
                  <span class="item-label">完成时间：</span>
                  <span class="item-value">{{ order.deliveryTime }}</span>
                </div>
                <div v-if="order.cancelTime" class="info-item">
                  <span class="item-label">取消时间：</span>
                  <span class="item-value">{{ order.cancelTime }}</span>
                </div>
                <div v-if="order.refundTime" class="info-item">
                  <span class="item-label">退款时间：</span>
                  <span class="item-value">{{ order.refundTime }}</span>
                </div>
                <div v-if="order.cancelReason" class="info-item">
                  <span class="item-label">取消原因：</span>
                  <span class="item-value">{{ order.cancelReason }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单金额 -->
        <div class="detail-section">
          <div class="section-title">金额信息</div>
          <div class="section-content">
            <div class="amount-info">
              <div class="amount-item">
                <span class="item-label">商品总价：</span>
                <span class="item-value">¥{{ order.totalAmount.toFixed(2) }}</span>
              </div>
              <div v-if="order.discountAmount > 0" class="amount-item">
                <span class="item-label">优惠金额：</span>
                <span class="item-value discount">-¥{{ order.discountAmount.toFixed(2) }}</span>
              </div>
              <div v-if="order.shippingFee > 0" class="amount-item">
                <span class="item-label">运费：</span>
                <span class="item-value">¥{{ order.shippingFee.toFixed(2) }}</span>
              </div>
              <div class="amount-item total">
                <span class="item-label">实付金额：</span>
                <span class="item-value">¥{{ getActualPayment().toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button v-if="canCancelOrder()" type="default" @click="handleCancelOrder">
            取消订单
          </el-button>
          <el-button v-if="canPayOrder()" type="primary" @click="handlePayOrder">
            立即支付
          </el-button>
          <el-button v-if="canConfirmReceipt()" type="primary" @click="handleConfirmReceipt">
            确认收货
          </el-button>
          <el-button v-if="canApplyRefund()" type="default" @click="handleApplyRefund">
            申请退款
          </el-button>
          <el-button v-if="canDeleteOrder()" type="default" @click="handleDeleteOrder">
            删除订单
          </el-button>
          <el-button v-if="canReview()" type="default" @click="handleReview">
            评价商品
          </el-button>
          <el-button type="default" @click="goBack" class="go-back-btn">
            返回
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-loading v-loading="loading" element-loading-text="加载中..." />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useOrderStore } from '../../store/modules/order'
import { useUserStore } from '../../store/modules/user'
import { ArrowRight, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()
const orderStore = useOrderStore()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const order = ref(null)

// 获取订单ID
const orderId = computed(() => route.params.id)

// 判断步骤是否激活
const isStepActive = (stepStatus) => {
  const statusOrder = ['pending_payment', 'pending_shipment', 'pending_receipt', 'completed']
  const currentIndex = statusOrder.indexOf(order.value?.status || '')
  const stepIndex = statusOrder.indexOf(stepStatus)
  return currentIndex >= stepIndex
}

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const typeMap = {
    pending_payment: 'warning',
    pending_shipment: 'primary',
    pending_receipt: 'primary',
    completed: 'success',
    cancelled: 'danger',
    refunded: 'info'
  }
  return typeMap[status] || 'default'
}

// 获取支付方式文本
const getPaymentMethodText = (method) => {
  const methodMap = {
    alipay: '支付宝',
    wechat: '微信支付',
    bank: '银行卡支付',
    cod: '货到付款'
  }
  return methodMap[method] || '未知支付方式'
}

// 获取实际支付金额
const getActualPayment = () => {
  if (!order.value) return 0
  const discount = order.value.discountAmount || 0
  const shippingFee = order.value.shippingFee || 0
  return order.value.totalAmount - discount + shippingFee
}

// 判断是否可以取消订单
const canCancelOrder = () => {
  return order.value && order.value.status === 'pending_payment'
}

// 判断是否可以支付订单
const canPayOrder = () => {
  return order.value && order.value.status === 'pending_payment'
}

// 判断是否可以确认收货
const canConfirmReceipt = () => {
  return order.value && order.value.status === 'pending_receipt'
}

// 判断是否可以申请退款
const canApplyRefund = () => {
  return order.value && 
         (order.value.status === 'pending_shipment' || 
          order.value.status === 'pending_receipt' || 
          order.value.status === 'completed')
}

// 判断是否可以删除订单
const canDeleteOrder = () => {
  return order.value && 
         (order.value.status === 'cancelled' || 
          order.value.status === 'completed' || 
          order.value.status === 'refunded')
}

// 判断是否可以评价
const canReview = () => {
  return order.value && order.value.status === 'completed'
}

// 返回订单列表
const goBack = () => {
  router.push('/order/list')
}

// 处理取消订单
const handleCancelOrder = () => {
  ElMessageBox.prompt(
    '请输入取消原因',
    '取消订单',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^.{1,50}$/,
      inputErrorMessage: '取消原因不能为空且不超过50字符'
    }
  ).then(async ({ value }) => {
    try {
      await orderStore.cancelOrder(orderId.value, value)
      ElMessage.success('订单已取消')
      loadOrderDetail() // 重新加载订单详情
    } catch (error) {
      ElMessage.error('取消订单失败：' + error.message)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理支付订单
const handlePayOrder = () => {
  router.push(`/pay/order/${orderId.value}`)
}

// 处理确认收货
const handleConfirmReceipt = () => {
  ElMessageBox.confirm(
    '确认已收到商品吗？确认后订单将完成。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await orderStore.confirmOrder(orderId.value)
      ElMessage.success('收货成功')
      loadOrderDetail() // 重新加载订单详情
    } catch (error) {
      ElMessage.error('确认收货失败：' + error.message)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理申请退款
const handleApplyRefund = () => {
  router.push(`/order/refund/${orderId.value}`)
}

// 处理删除订单
const handleDeleteOrder = () => {
  ElMessageBox.confirm(
    '确定要删除该订单吗？删除后将无法恢复。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'danger'
    }
  ).then(async () => {
    try {
      await orderStore.deleteOrder(orderId.value)
      ElMessage.success('订单已删除')
      router.push('/order/list') // 返回订单列表
    } catch (error) {
      ElMessage.error('删除订单失败：' + error.message)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理评价商品
const handleReview = () => {
  router.push(`/order/review/${orderId.value}`)
}

// 加载订单详情
const loadOrderDetail = async () => {
  loading.value = true
  try {
    // 检查用户是否登录
    if (!userStore.isLoggedIn) {
      ElMessage.warning('请先登录')
      router.push('/login')
      return
    }
    
    // 模拟API调用，实际项目中替换为真实API
    // const data = await orderStore.getOrderDetail(orderId.value)
    // order.value = data
    
    // 模拟订单详情数据
    order.value = generateMockOrderDetail(orderId.value)
  } catch (error) {
    ElMessage.error('加载订单详情失败：' + error.message)
    order.value = null
  } finally {
    loading.value = false
  }
}

// 生成模拟订单详情数据
const generateMockOrderDetail = (orderId) => {
  // 模拟一个详细的订单数据
  const mockOrder = {
    id: orderId || 'ORD20231124002',
    createTime: '2023-11-24 09:15:10',
    totalAmount: 3498,
    discountAmount: 0,
    shippingFee: 0,
    status: 'pending_receipt',
    statusText: '待收货',
    items: [
      {
        id: 2,
        productId: 3,
        name: '智能手表 Series 7',
        image: '/product/hot3.png',
        price: 2199,
        quantity: 1,
        specs: { '颜色': '深空灰', '尺寸': '45mm' }
      },
      {
        id: 3,
        productId: 4,
        name: '无线蓝牙耳机 Pro',
        image: '/product/hot4.png',
        price: 1299,
        quantity: 1,
        specs: { '颜色': '白色' }
      }
    ],
    address: {
      name: '张三',
      phone: '138****1234',
      province: '广东省',
      city: '深圳市',
      district: '南山区',
      detailAddress: '科技园南区8栋101室'
    },
    paymentMethod: 'wechat',
    paymentTime: '2023-11-24 09:20:35',
    shippingTime: '2023-11-25 10:15:40',
    logisticsCompany: '顺丰速运',
    trackingNumber: 'SF1234567890123',
    logisticsInfo: [
      {
        time: '2023-11-26 14:30:25',
        text: '快递员[李四(13800138000)]正在为您派送，请保持电话畅通'
      },
      {
        time: '2023-11-26 09:15:10',
        text: '快件已到达[深圳南山区科技园营业点]'
      },
      {
        time: '2023-11-25 18:45:50',
        text: '快件已到达[深圳转运中心]'
      },
      {
        time: '2023-11-25 10:15:40',
        text: '快件已由[广州仓库]发出'
      },
      {
        time: '2023-11-25 08:30:20',
        text: '商家已发货，等待快递揽收'
      }
    ]
  }
  
  return mockOrder
}

// 组件挂载时加载数据
onMounted(() => {
  loadOrderDetail()
})
</script>

<style scoped>
.order-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 面包屑导航 */
.breadcrumb-section {
  margin: 20px 0;
}

/* 页面标题 */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: $font-size-xxl;
  color: $text-color;
  font-weight: bold;
  margin: 0;
}

/* 订单状态卡片 */
.order-status-card {
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 30px;
  margin-bottom: 20px;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.order-number,
.create-time {
  font-size: $font-size-base;
  color: $text-color-secondary;
}

.status-badge {
  margin-left: auto;
}

/* 订单状态进度 */
.status-progress {
  padding-top: 20px;
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8px;
  margin-bottom: 20px;
}

.progress-step {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: $border-color;
  position: relative;
  top: -6px;
  transition: all 0.3s;
}

.progress-step.active {
  background-color: $primary-color;
}

.progress-line {
  flex: 1;
  height: 2px;
  background-color: $border-color;
  transition: all 0.3s;
}

.progress-line.active {
  background-color: $primary-color;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
}

.progress-label {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  width: 80px;
  text-align: center;
}

/* 订单详情内容 */
.order-detail-content {
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 0;
}

/* 订单不存在 */
.order-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: 40px;
}

.not-found-icon {
  font-size: 80px;
  color: $text-color-placeholder;
  margin-bottom: 20px;
}

.not-found-text {
  font-size: $font-size-base;
  color: $text-color-secondary;
  margin-bottom: 20px;
}

.go-back-btn {
  padding: 10px 30px;
  font-size: $font-size-base;
}

/* 订单详情 */
.order-detail {
  /* 由各section填充 */
}

/* 详情区块 */
.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: $font-size-lg;
  color: $text-color;
  font-weight: 500;
  padding: 20px 30px 10px;
  border-bottom: 1px solid $border-color;
}

.section-content {
  padding: 20px 30px;
}

/* 收货信息 */
.address-info {
  padding: 10px 0;
}

.recipient-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.recipient-name,
.recipient-phone {
  font-size: $font-size-base;
  color: $text-color;
}

.address-detail {
  font-size: $font-size-base;
  color: $text-color-secondary;
  line-height: 1.5;
}

/* 商品列表 */
.product-list {
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  overflow: hidden;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid $border-color;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-name {
  font-size: $font-size-base;
  color: $text-color;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.spec-item {
  font-size: $font-size-xs;
  color: $text-color-secondary;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price {
  font-size: $font-size-base;
  color: $danger-color;
}

.quantity {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.product-total {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
  width: 100px;
  text-align: right;
}

/* 支付信息 */
.payment-info {
  padding: 10px 0;
}

.payment-item,
.shipping-item,
.info-item,
.amount-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.payment-item:last-child,
.shipping-item:last-child,
.info-item:last-child,
.amount-item:last-child {
  margin-bottom: 0;
}

.item-label {
  font-size: $font-size-base;
  color: $text-color-secondary;
  width: 100px;
  flex-shrink: 0;
}

.item-value {
  font-size: $font-size-base;
  color: $text-color;
}

.item-value.discount {
  color: $danger-color;
}

/* 物流详情 */
.logistics-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid $border-color;
}

.logistics-title {
  font-size: $font-size-base;
  color: $text-color;
  margin-bottom: 15px;
}

.logistics-steps {
  position: relative;
  padding-left: 30px;
}

.logistics-step {
  position: relative;
  padding-bottom: 20px;
}

.logistics-step:last-child {
  padding-bottom: 0;
}

.step-icon {
  position: absolute;
  left: -30px;
  width: 20px;
  height: 20px;
  background-color: $primary-color;
  border-radius: 50%;
}

.step-icon.first::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 10px;
  width: 2px;
  height: calc(100% + 20px);
  background-color: $border-color;
}

.step-icon.last {
  background-color: $border-color;
}

.step-content {
  padding-left: 10px;
}

.step-text {
  font-size: $font-size-base;
  color: $text-color;
  margin-bottom: 5px;
}

.step-time {
  font-size: $font-size-xs;
  color: $text-color-secondary;
}

/* 订单信息 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

/* 金额信息 */
.amount-info {
  text-align: right;
  padding: 10px 0;
}

.amount-item.total {
  font-weight: bold;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid $border-color;
}

.amount-item.total .item-value {
  color: $danger-color;
  font-size: $font-size-lg;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 30px;
  border-top: 1px solid $border-color;
  background-color: #fafafa;
}

/* 加载状态 */
.loading-container {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  /* 保持现有样式 */
}

@media (max-width: 992px) {
  .status-info {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .status-badge {
    margin-left: 0;
  }
  
  .product-item {
    padding: 15px;
  }
  
  .product-image {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .order-detail-container {
    padding: 0 10px;
  }
  
  .order-status-card,
  .section-content {
    padding: 15px;
  }
  
  .section-title {
    padding: 15px;
  }
  
  .product-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .product-image {
    margin-right: 0;
  }
  
  .product-total {
    width: auto;
    text-align: left;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .status-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .progress-step {
    width: 16px;
    height: 16px;
    top: -4px;
  }
  
  .progress-label {
    font-size: $font-size-xs;
    width: 60px;
  }
  
  .recipient-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style>